<style lang="less">
    @import './login.less';
</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card>
                <Tabs value="name1" class="tabs-bars">
                    <TabPane label="用户登录" name="name1" class="tabs-bars-box">
                        <div class="form-con">
                            <Form ref="formInline" :model="formInline" :rules="ruleInline">
                                <Form-item prop="user">
                                    <i-input type="text" v-model="formInline.user" placeholder="请输入用户名">
                                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                                    </i-input>
                                </Form-item>

                                <Form-item prop="password">
                                    <i-input type="password" v-model="formInline.password" placeholder="请输入密码">
                                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                                    </i-input>
                                </Form-item>

                                <Form-item class="login-password-box">
                                    <Checkbox v-model="remember">记住密码</Checkbox>
                                    <span class="pull-right">忘记密码?</span>
                                </Form-item>


                                <Form-item class="login-btns">
                                    <Button :loading="loading" type="primary" shape="circle"
                                            @click="handleSubmit('formInline')">登录
                                    </Button>
                                    <Button type="ghost" shape="circle" @click.prevent.stop="register()">注册</Button>
                                </Form-item>

                                <p class="login-tip">使用第三方登录</p>
                                <div class="login-box">
                                    <a href="#">
                                        <i class="icon icon-wechat"></i>
                                        <span>QQ登录</span>
                                    </a>
                                    <a href="#">
                                        <i class="icon icon-qq"></i>
                                        <span>微信登录</span>
                                    </a>
                                </div>
                            </Form>


                        </div>
                    </TabPane>
                    <TabPane label="扫码登录" name="name2">
                        <div class="form-con">
                            <img src="../images/code.png" alt="" width="100%">
                            <p class="login-title">使用LNG移动端扫码即可登录</p>
                        </div>
                    </TabPane>
                </Tabs>

            </Card>
        </div>
    </div>
</template>

<script>
    import Cookies from 'js-cookie';
    import util from '@/libs/util';

    export default {
        data () {
            return {
                remember: false,
                loading: false,
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        {required: true, message: '请填写用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'},
                        {type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            handleSubmit() {
                this.$refs.formInline.validate((valid) => {
                    if (valid) {
                        let params = {
                            account: this.formInline.user,
                            password: this.formInline.password
                        };
                        if (this.remember) {
                            Cookies.set('user', this.formInline.user);
                            Cookies.set('password', this.formInline.password);
                            this.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');

                        }
                        this.$emit('showLoading');
                        this.loading = true;


                        util.fetchPost(util.path.loginApi, params).then((data) => {
                            //控制加载条
                            if (data.code == 10000) {
                                this.$emit('hideLoading');
                                this.$Message.success('登录成功！');
                                this.loading = false;
                                Cookies.set('token', data.data.token);

                                setTimeout(() => {
                                    let redirect = this.$route.query.redirect;
                                    // redirect - token 验证失败传入
                                    if (redirect) {
                                        this.$router.push({name: redirect})
                                    } else {
                                        this.$router.push({
                                            name: 'home_index'
                                        });
                                    }
                                }, 1000);
                            } else {
                                this.$Message.error(data.msg);
                            }


                        }).catch(err => {
                            this.$emit('hideLoading');
                            this.$Message.error(err);
                        })
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
        }
    };
</script>

<style>

</style>
